<template>
  <div class="box">
    <header :style="{ background: `url(${sellerInf.avatar})` }">
      <img :src="sellerInf.avatar" alt="">
      <div class="mask"></div>

      <div class="headerRight">
        <h3><span>品牌</span>{{ sellerInf.name }}</h3>
        <p>{{ sellerInf.description }}/38分钟送达</p>
        <p><span>减</span>{{ sellerInf.supports[0].description }}<span>5个&nbsp;></span></p>
      </div>
      <div class="headerFoot">
        <b><strong>公告</strong>{{ sellerInf.bulletin }}</b>
      </div>
    </header>
    <nav>
      <ul>
        <li>
          <router-link @click="tab(0)" :class="tag === 0 ? 'active' : ''" to="/goods">商品</router-link>
        </li>
        <li>
          <router-link @click="tab(1)" :class="tag === 1 ? 'active' : ''" to="/eva">评价</router-link>
        </li>
        <li>
          <router-link @click="tab(2)" :class="tag === 2 ? 'active' : ''" to="/shop">商家</router-link>
        </li>
      </ul>
    </nav>
    <router-view></router-view>
    <footer>
      <div class="maskShow" v-show="maskShow" @click="mask(),changeColor()"></div>
      <p @click="mask(),changeColor()" :class="color?'background':''">
        <span class="iconfont icon-gouwuchefill"></span>
      </p>
      <span>￥{{ plusPrice }}</span>
      <b>另需配送费￥4元</b>
      <strong>￥20起送</strong>
      <div v-show="carHire" class="car">
        <p>
          <span>购物车</span>
          <span @click="clear()">清空</span>
        </p>
        <p class="moneyCar" v-for="(item, index) in carInf" :key="index">
          <span style="font-size: 4vw">{{ item.name }}</span>
        <div class="btn">
          <span style="color:red;font-weight:900;font-size: 4vw;">￥{{ item.price * item.num }}</span>
          <button @click="minus(index)">-</button>
          <p style="font-size: 3vw;">{{ item.num }}</p>
          <button @click="add(index)">+</button>
        </div>
        </p>
      </div>
    </footer>
  </div>
</template>

<script>
import axios from 'axios'
import { computed } from '@vue/reactivity'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import "./font/font_owfuhawsv6/iconfont.css"

export default {
  data() {
    return {
      color: 'red',
      navArr: ['商品', '评价', '商家'],
      carHire: false,
      maskShow: false,
      tag: 0,
      color:false,

    }
  },
  methods: {
    ...mapMutations(['add', 'minus','clear']),
    ...mapActions(['getSeller']),
    mask() {
      this.carHire = !this.carHire
      this.maskShow = !this.maskShow
      console.log(this.$store.state.foodInf)
    },
    tab(index) {
      this.tag = index
    },
    goSon(index) {
      this.$router.push({
        path: "/goods/detail",
      })
    },
    changeColor(){
      this.color=!this.color
    },

  },
  computed: {
    ...mapState(['carInf', 'plusPrice', 'sellerInf'])
  },
  created() {
    axios.get('http://localhost:8000/seller').then((req) => {
      // console.log(req)
    })
    this.getSeller()
  }
}
</script>

<style scoped>
.iconfont{
  width: 50px;
  height: 50px;
}
* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
}

header {
  display: flex;
  width: 100%;
  height: 35.42vw;
  background-color: aqua;
  position: relative;
}

header img {
  height: 19.64vw;
  position: absolute;
  z-index: 5;
  top: 3.12vw;
  left: 3.12vw;
}

.headerRight {
  position: absolute;
  left: 25.88vw;
  top: 3.12vw;
  z-index: 5;
}

.headerRight h3>span {
  background-color: red;
  display: inline-block;
  width: 6.5vw;
  text-align: center;
  height: 3.9vw;
  line-height: 3.9vw;
  color: white;
  margin-right: 1.56vw;
  font-size: 3vw;
}

.headerRight>h3 {
  color: white;
  margin-bottom: 0.78vw;
}

.headerRight>p {
  color: white;
  font-size: 3.5vw;
  line-height: 5.82vw;
}

.headerRight>p:nth-of-type(2) span:nth-of-type(1) {
  color: red;
  font-weight: bold;
  display: inline-block;
  width: 3.6vw;
  height: 3.6vw;
  line-height: 3.6vw;
  background-color: white;
  text-align: center;
  margin-right: 1.04vw;
  border-radius: 0.65vw;
}

.headerRight>p:nth-of-type(2) span:nth-of-type(2) {
  display: inline-block;
  margin-left: 25vw;
  width: 11.48vw;
  height: 7.24vw;
  text-align: center;
  line-height: 7.24vw;
  font-size: 3.3vw;
  border-radius: 1.8vw;
  background-color: rgba(0, 0, 0, 0.3);
}

header .headerFoot {
  position: absolute;
  bottom: 0;
  height: 7.2vw;
  line-height: 7.2vw;
  width: 100%;
  color: white;
  background-color: rgba(7, 17, 27, 0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 6;
}

.headerFoot b,
strong {
  font-weight: 500;
  color: white;
  font-size: 3.5vw;
}

.headerFoot strong {
  display: inline-block;
  width: 8.2vw;
  height: 5vw;
  line-height: 5vw;
  margin-right: 1.52vw;
  margin-left: 1.56vw;
  background-color: white;
  color: black;
  font-weight: bold;
  text-align: center;
}

.mask {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 4;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
}

nav {
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
  height: 10.4vw;
  line-height: 10.4vw;
}

a {
  text-decoration: none;
  color: rgb(77, 85, 93);
  font-size: 3.64vw;
}

footer {
  width: 100%;
  height: 12vw;
  background-color: black;
  position: fixed;
  bottom: 0;
  margin-top: 300px;
  box-sizing: border-box;
  line-height: 10vw;
  z-index: 100;
}

footer>p {
  width: 10vw;
  height: 10vw;
  text-align: center;
  border: 1.56vw solid black;
  border-radius: 50%;
  background-color: gray;
  color: rgba(255,255,255,0.7);
  position: absolute;
  bottom: 2.08vw;
  margin-left: 4.68vw;
  z-index: 101;
}
footer>p span{
  font-size: 5vw;
}
footer>span {
  color: rgba(255, 255, 255, 0.4);
  position: absolute;
  left: 20vw;
  line-height: 12vw;
  font-size: 4.16vw;
  font-weight: 900;
  padding-right: 3.12vw;
  box-sizing: border-box;
  border-right: 2px solid rgba(255, 255, 255, 0.1);
}

footer b {
  position: absolute;
  padding-left: 2.12vw;
  left: 31vw;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  font-size: 4.16vw;
  line-height: 12vw;
}

footer strong {
  position: absolute;
  color: rgba(255, 255, 255, 0.4);
  right: 2.2vw;
  display: block;
  background-color: rgba(255, 255, 255, 0.4);
  width: 27.3vw;
  height: 12vw;
  line-height: 12vw;
  text-align: center;
}

.car {
  width: 100%;
  height: 80vw;
  position: absolute;
  bottom: 12vw;
  background-color: white;
  overflow: auto;
}

.car p:nth-of-type(1) {
  font-size: 3.7vw;
  display: flex;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.car p:nth-of-type(1) span {
  margin-left: 1.3vw;
  color: rgba(0, 0, 0, 0.8);
}

.car p:nth-of-type(1) span+span {
  margin-right: 4.6vw;
  color: rgb(0, 160, 220);
}

.car span {
  display: block;
}

.car .moneyCar {
  font-size: 3.56vw;
  display: flex;
  justify-content: space-between;
  background-color: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.car .moneyCar div {
  display: flex;
  margin-right: 20px;
  align-items: center;
}

.car .moneyCar div p {
  font-size: 1.56vw;
  background-color: white;
  border-bottom: 0px;
}

.active {
  color: red;
}

.btn {
  display: flex;
  text-align: center;
}

.btn button {
  background-color: rgb(0, 160, 220);
  border: 0vw;
  border-radius: 50%;
  color: white;
  box-sizing: border-box;
  font-size: 5.6vw;
  width: 6.6vw;
  height: 6.6vw;
  line-height: 4.6vw;
}

.btn button:nth-of-type(1) {
  border: 3px solid rgb(0,160,220);
  background-color: white;
  color: rgb(0, 160, 220);
  margin-right: 2.5vw;
  margin-left: 2.5vw;
}

.btn button:nth-of-type(2) {
  margin-left: 2.5vw;
}

.maskShow {
  position: fixed;
  width: 100%;
  height: calc(100% - 90vw);
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2.8vw);
}
.background{
  background-color: rgb(0, 160, 220);
  color: white;
}
</style>